<html>
<head> 
	<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.css">
    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
    <script src="https://cdn.bootcss.com/require.js/2.3.6/require.min.js"></script>
    <title>流量流速互换</title> 

<script>
	function toRound(value){
		var value2;
		if (value > 1000){
			value2 = value.toFixed(0);
		}
		else if (value > 100){
			value2 = value.toFixed(1);
		}
		else if (value > 10){
			value2 = value.toFixed(2);
		}
		else if (value > 1){
			value2 = value.toFixed(3);
		}
		else{
			value2 = value.toFixed(4);
		}
		return value2
	}

	// 计算流速
	function calcVelocity(){
		// 获取口径
		var size = $('[name="size"]:checked').val();

		var flow = document.getElementById('flow').value;
		if (flow == '') {
			return;
		}
		var velocity = flow / 3600 / 3.1415926 / (size / 2 / 1000) / (size / 2 / 1000);

		document.getElementById('velocity').value = toRound(velocity);
	}

	// 计算流量
	function calcFlow(){
		// 获取口径
		var size = $('[name="size"]:checked').val();

		var velocity = document.getElementById('velocity').value;
		var flow = velocity * 3600 * 3.1415926 * (size / 2 / 1000) * (size / 2 / 1000);

		document.getElementById('flow').value = toRound(flow);
	}
</script>
<style>
.ui-input{
  float:left;
  width: 150px; 
}
.ui-input>div{
    display: inline-block;
    line-height: 26px;
    height: 26px;
}

.ui-lable{
   float:left;
   line-height:36px; 
   width: 50px; 
}

.ui-lable.ui-lable-left{
   line-height:36px;	
}
</style>

</head>
<body>
    <div data-role="page" id="pageone">
		<div data-role="header" data-position="fixed">
			<h1 id="header-device-detail">流量流速互换计算</h1>
			<a href="javascript:document.location='./flow.html'" class="ui-btn ui-btn-right ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-back"></a>
		</div>

		<div data-role="main" class="ui-content">
		
		<form action="">
			<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
				<legend><b>口径</b>(切换口径时，用流量计算流速)：</legend>
				<label for="size_2.5">DN2.5</label>
				<input type="radio" name="size" id="size_2.5" onchange="calcVelocity()" value="2.5">
				<label for="size_5">DN5</label>
				<input type="radio" name="size" id="size_5" onchange="calcVelocity()" value="5">
				<label for="size_6">DN6</label>
				<input type="radio" name="size" id="size_6" onchange="calcVelocity()" value="6">
				<label for="size_8">DN8</label>
				<input type="radio" name="size" id="size_8" onchange="calcVelocity()" value="8">
				<label for="size_10">DN10</label>
				<input type="radio" name="size" id="size_10" onchange="calcVelocity()" value="10">
				<label for="size_15">DN15</label>
				<input type="radio" name="size" id="size_15" onchange="calcVelocity()" value="15">
				<label for="size_20">DN20</label>
				<input type="radio" name="size" id="size_20" onchange="calcVelocity()" value="20">
				<label for="size_25">DN25</label>
				<input type="radio" name="size" id="size_25" onchange="calcVelocity()" value="25">
				<label for="size_32">DN32</label>
				<input type="radio" name="size" id="size_32" onchange="calcVelocity()" value="32">
				<label for="size_40">DN40</label>
				<input type="radio" name="size" id="size_40" onchange="calcVelocity()" value="40">
				<label for="size_50">DN50</label>
				<input type="radio" name="size" id="size_50" onchange="calcVelocity()" value="50" checked >
				<label for="size_65">DN65</label>
				<input type="radio" name="size" id="size_65" onchange="calcVelocity()" value="65">
				<label for="size_80">DN80</label>
				<input type="radio" name="size" id="size_80" onchange="calcVelocity()" value="80">
				<label for="size_100">DN100</label>
				<input type="radio" name="size" id="size_100" onchange="calcVelocity()" value="100">
				<label for="size_125">DN125</label>
				<input type="radio" name="size" id="size_125" onchange="calcVelocity()" value="125">
				<label for="size_150">DN150</label>
				<input type="radio" name="size" id="size_150" onchange="calcVelocity()" value="150">
				<label for="size_200">DN200</label>
				<input type="radio" name="size" id="size_200" onchange="calcVelocity()" value="200">
				<label for="size_250">DN250</label>
				<input type="radio" name="size" id="size_250" onchange="calcVelocity()" value="250">
				<label for="size_300">DN300</label>
				<input type="radio" name="size" id="size_300" onchange="calcVelocity()" value="300">
				<label for="size_350">DN350</label>
				<input type="radio" name="size" id="size_350" onchange="calcVelocity()" value="350">
				<label for="size_400">DN400</label>
				<input type="radio" name="size" id="size_400" onchange="calcVelocity()" value="400">
				<label for="size_450">DN450</label>
				<input type="radio" name="size" id="size_450" onchange="calcVelocity()" value="450">
				<label for="size_500">DN500</label>
				<input type="radio" name="size" id="size_500" onchange="calcVelocity()" value="500">
				<label for="size_600">DN600</label>
				<input type="radio" name="size" id="size_600" onchange="calcVelocity()" value="600">
				<label for="size_700">DN700</label>
				<input type="radio" name="size" id="size_700" onchange="calcVelocity()" value="700">
				<label for="size_800">DN800</label>
				<input type="radio" name="size" id="size_800" onchange="calcVelocity()" value="800">
				<label for="size_900">DN900</label>
				<input type="radio" name="size" id="size_900" onchange="calcVelocity()" value="900">
				<label for="size_1000">DN1000</label>
				<input type="radio" name="size" id="size_1000" onchange="calcVelocity()" value="1000">
				<label for="size_1200">DN1200</label>
				<input type="radio" name="size" id="size_1200" onchange="calcVelocity()" value="1200">
				<label for="size_1400">DN1400</label>
				<input type="radio" name="size" id="size_1400" onchange="calcVelocity()" value="1400">
				<label for="size_1600">DN1600</label>
				<input type="radio" name="size" id="size_1600" onchange="calcVelocity()" value="1600">
				<label for="size_1800">DN1800</label>
				<input type="radio" name="size" id="size_1800" onchange="calcVelocity()" value="1800">
				<label for="size_2000">DN2000</label>
				<input type="radio" name="size" id="size_2000" onchange="calcVelocity()" value="2000">
				<label for="size_2200">DN2200</label>
				<input type="radio" name="size" id="size_2200" onchange="calcVelocity()" value="2200">
				<label for="size_2400">DN2400</label>
				<input type="radio" name="size" id="size_2400" onchange="calcVelocity()" value="2400">
				<label for="size_2600">DN2600</label>
				<input type="radio" name="size" id="size_2600" onchange="calcVelocity()" value="2600">
				<label for="size_2800">DN2800</label>
				<input type="radio" name="size" id="size_2800" onchange="calcVelocity()" value="2800">
				<label for="size_3000">DN3000</label>
				<input type="radio" name="size" id="size_3000" onchange="calcVelocity()" value="3000">
			</fieldset>

			<li data-role="fieldcontain">
				<div class="ui-grid-a">
					<div class="ui-lable ui-lable-left">
					    <label><b>流量：</b></label>
				    </div>
					<div class="ui-input">
					    <input type="text" width="10px" name="flow" id="flow" data-mini="true" onchange="calcVelocity()">
					</div>
					<div class="ui-lable">
					    <label >m<sup>3</sup>/h</label>
				    </div>
				</div>
				<div class="ui-grid-a">
					<div class="ui-lable ui-lable-left">
					    <label><b>流速：</b></label>
				    </div>
					<div class="ui-input">
					    <input type="text" width="10px" name="velocity" id="velocity" data-mini="true" onchange="calcFlow()">
					</div>
					<div class="ui-lable">
					    <label >m/s</label>
				    </div>
				</div>
			</li>
		</form>
			<li data-role="fieldcontain">
				<div class="ui-grid-a">
				    <label><b></b></label>
				</div>
			</li>
	    </div>
	</div>
</body>
</html>